<template>
    <div id="MyIndex-app">
        <div id="MyIndex-Content">
            <MyIndexTop></MyIndexTop>
            <MyIndexMiddle></MyIndexMiddle>
        </div>
    </div>
</template>

<script>
    import MyIndexTop from 'com/My/MyIndex/MyIndex-Top.vue'
    import MyIndexMiddle from 'com/My/MyIndex/MyIndex-Middle.vue'
    export default {
        name: "My-index",
        components:{
            MyIndexTop,
            MyIndexMiddle
        },
        created(){
            this.$store.dispatch("MyIndexDetailxaios");

            //在页面加载时读取localStorage里的状态信息
            if (localStorage.getItem("data")) {
                //replaceState替换数据 Object.assign合并对象
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("data"))))
            }
            //在页面刷新时将vuex里的信息保存到localStorage里
            window.addEventListener("beforeunload", () => {
                localStorage.setItem("data", JSON.stringify(this.$store.state))
            })
        }
    }
</script>

<style lang="scss" scoped>
    #MyIndex-app{
        height: 100%;
    }

    #MyIndex-Content{

    }
</style>